Web App Manifest: Вашето ръководство за конфигуриране на Progressive Web App

Web App Manifest е JSON файл, който предоставя информация за вашето уеб приложение на браузъри и операционни системи. Тази информация се използва, когато приложението е инсталирано на устройството на потребителя, определяйки как изглежда и се държи като Progressive Web App (PWA). Мислете за него като за чертеж, който трансформира вашия уебсайт в инсталируемо изживяване, подобно на приложение. Добре конфигуриран манифест е от решаващо значение за ангажирането на потребителите и откриваемостта.

Какво е Progressive Web App (PWA)?

Преди да се потопим в Web App Manifest, нека да припомним какво е PWA. PWAs са уеб приложения, които предлагат на потребителите изживяване, подобно на приложение. Те са:

• Надеждни: Зареждат се моментално и работят офлайн или в нискокачествени мрежи, благодарение на service workers.
• Бързи: Реагират бързо на потребителските взаимодействия с плавни анимации и без насичане при превъртане.
• Ангажиращи: Предлагат завладяващо потребителско изживяване с функции като push известия и възможност за инсталиране на началния екран.

Ролята на Web App Manifest

Web App Manifest е крайъгълният камък на PWA. Той предоставя необходимата информация на браузърите, за да:

• Инсталират PWA: Той позволява на потребителите да инсталират уеб приложението на своите устройства, добавяйки го към началния екран или стартовия панел на приложения.
• Показват PWA правилно: Той определя името на приложението, иконите, цвета на темата и други визуални аспекти.
• Контролират поведението на PWA: Той определя как приложението трябва да се стартира (например в режим на цял екран или като самостоятелен прозорец) и как трябва да бъде интегрирано с операционната система.

Създаване на вашия `manifest.json` файл

Web App Manifest е JSON файл, обикновено наречен `manifest.json`. Той трябва да бъде поставен в главната директория на вашето уеб приложение. Ето един основен пример:

            {
  "name": "My Awesome PWA",
  "short_name": "Awesome PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

Нека разгледаме всяко едно от тези свойства:

`name`

Пълното име на вашето уеб приложение. Това име ще се показва на потребителите, когато бъдат подканени да инсталират приложението и в стартовия панел на приложения.

Пример:

            "name": "Global News App"
            

              
                Copy
              
            
          

`short_name`

По-кратка версия на името на вашето приложение, използвана, когато има ограничено пространство, като например на началния екран или в стартовия панел на приложения. Поддържайте го кратко.

Пример:

            "short_name": "Global News"
            

              
                Copy
              
            
          

`start_url`

URL адресът, който приложението трябва да зареди, когато бъде стартирано. Обикновено това е началната страница на вашето уеб приложение, но може да бъде и конкретна целева страница.

Пример:

            "start_url": "/"
            

              
                Copy
              
            
          

Можете също да използвате URL адрес с параметри на заявката, за да проследявате как потребителите стартират вашето PWA:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Определя как приложението трябва да се показва, когато бъде стартирано. Има няколко опции:

• `standalone`: Приложението ще се отвори в собствен прозорец от най-високо ниво, без елементи на потребителския интерфейс на браузъра, като например адресната лента.
• `fullscreen`: Приложението ще заеме целия екран, скривайки дори лентата на състоянието.
• `minimal-ui`: Подобно на `standalone`, но предоставя минимален потребителски интерфейс на браузъра, като например бутон за връщане назад и бутон за опресняване.
• `browser`: Приложението ще се отвори в нормален раздел или прозорец на браузъра.

Препоръка: `standalone` обикновено е предпочитаната опция за PWAs.

Пример:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

Цветът на фона на началния екран на приложението, когато бъде стартирано. Това е важно за осигуряване на плавен преход между иконата на приложението и съдържанието на приложението.

Пример:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

Цветът на темата, използван за стилизиране на потребителския интерфейс на приложението, като например лентата на състоянието на Android. Този цвят трябва да съответства на марката на вашето приложение.

Пример:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

Масив от обекти, всеки от които представлява икона за приложението. Трябва да предоставите няколко икони с различни размери, за да сте сигурни, че приложението изглежда добре на различни устройства и разделителни способности.

Свойства за всяка икона:

• `src`: URL адресът на изображението на иконата.
• `sizes`: Размерите на иконата в пиксели (например "192x192").
• `type`: MIME типът на изображението на иконата (например "image/png").

Препоръчителни размери на икони:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

Пример:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

Допълнителни свойства на манифеста

Въпреки че свойствата по-горе са най-често срещаните, Web App Manifest поддържа много други опции за конфигуриране на вашето PWA:

`id`

Уникален идентификатор за вашето PWA. Това е важно за предотвратяване на конфликти, ако имате няколко PWAs със същото име.

Пример:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Определя обхвата на навигацията на приложението. Това определя кои URL адреси в рамките на вашия уебсайт се считат за част от PWA. Ако потребителят навигира извън обхвата, приложението ще се отвори в нормален раздел на браузъра.

Пример:

            "scope": "/app/"
            

              
                Copy
              
            
          

В този пример само URL адреси, които започват с `/app/`, ще се считат за част от PWA.

`orientation`

Определя предпочитаната ориентация на екрана за приложението. Опциите включват `portrait`, `landscape`, `any` и други.

Пример:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

Масив от обекти, които определят свързани собствени приложения. Това ви позволява да популяризирате вашите собствени приложения сред потребителите, които вече са инсталирали вашето PWA.

Пример:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

Този пример показва, че има свързано собствено приложение в Google Play Store с идентификатор `com.example.myapp`.

`prefer_related_applications`

Булева стойност, която показва дали потребителят трябва да бъде подканен да инсталира свързаното собствено приложение вместо PWA.

Пример:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

Масив от низове, които представляват категориите на приложението. Това може да помогне на потребителите да намерят вашето приложение в магазините за приложения или в резултатите от търсенето.

Пример:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

Определя списък с преки пътища, до които потребителите могат да получат достъп от иконата на приложението на началния си екран. Това позволява на потребителите бързо да извършват често срещани задачи в приложението.

Пример:

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Свързване на манифеста към вашето уеб приложение

След като сте създали своя `manifest.json` файл, трябва да го свържете към вашето уеб приложение, като добавите `` таг към `` секцията на вашия HTML:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

Валидиране на вашия манифест

Важно е да валидирате вашия `manifest.json` файл, за да се уверите, че е правилно форматиран и съдържа всички необходими свойства. Можете да използвате онлайн инструменти като JSONLint или Chrome DevTools, за да валидирате своя манифест.

Тестване на вашето PWA

След създаването и свързването на вашия манифест трябва да тествате вашето PWA в различни браузъри и устройства, за да се уверите, че работи според очакванията. Използвайте Chrome DevTools (Application -> Manifest), за да инспектирате своя манифест и да диагностицирате всякакви проблеми.

Най-добри практики за конфигуриране на Web App Manifest

Ето някои най-добри практики, които трябва да имате предвид, когато конфигурирате своя Web App Manifest:

• Предоставете всички необходими свойства: Уверете се, че сте включили всички основни свойства, като например `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` и `icons`.
• Използвайте подходящи размери на иконите: Предоставете няколко икони с различни размери, за да поддържате различни устройства и разделителни способности.
• Изберете правилния режим на показване: Изберете режима `display`, който най-добре отговаря на потребителското изживяване на вашето приложение. `standalone` обикновено е предпочитаната опция.
• Валидирайте своя манифест: Винаги валидирайте своя `manifest.json` файл, за да се уверите, че е правилно форматиран.
• Тествайте своето PWA: Тествайте своето PWA в различни браузъри и устройства, за да се уверите, че работи според очакванията.
• Оптимизирайте за SEO: Използвайте подходящи ключови думи във вашите `name`, `short_name` и `description`, за да подобрите откриваемостта на вашето приложение.
• Обмислете локализация: Ако приложението ви е насочено към глобална аудитория, обмислете предоставянето на локализирани версии на вашия манифест с различни имена, описания и икони за различни езици.

Примери за добре конфигурирани Web App Manifest

Ето няколко примера за добре конфигурирани Web App Manifest от популярни PWAs:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite is a faster, data-friendly way to see what's happening in the world.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Order your favorite Starbucks drinks and food with the app.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

Бъдещето на Web App Manifest

Web App Manifest е развиващ се стандарт, с нови функции и възможности, които се добавят с течение на времето. Следете последните актуализации и препоръки от W3C, за да сте сигурни, че вашите PWAs се възползват напълно от най-новите технологии.

Заключение

Web App Manifest е основен компонент на всяко PWA. Като конфигурирате правилно своя манифест, можете да предоставите безпроблемно и ангажиращо потребителско изживяване, което да направи вашето уеб приложение да се чувства като собствено приложение. Това ръководство предостави изчерпателен преглед на Web App Manifest, включително неговите свойства, най-добри практики и примери. Следвайки тези указания, можете да отключите пълния потенциал на вашите PWAs и да предоставите превъзходно потребителско изживяване на вашите потребители по целия свят.

Прегърнете силата на Web App Manifest и трансформирайте вашите уебсайтове в инсталируеми изживявания, подобни на приложения, които радват потребителите и стимулират ангажираността.